<template>
  <div>
    <i-dialog
      :title="'查看设备'"
      :visible="visible"
      width="642px"
      :close-on-click-modal="false"
      @close="outerClose"
    >
      <i-form
        :items="formItems"
        :model="form"
        ref="form"
        label-width="95px"
        class="demo-form"
      >
        <template slot="checkbox">
          <el-form-item>
            <el-checkbox-group v-model="paramList" class="checkbox-group">
              <el-checkbox
                v-for="childItem in options"
                :key="childItem.label"
                v-bind="childItem"
              >
                {{ childItem.text }}:
                <span class="value-text">{{ valueList[childItem.label] }}</span>
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </template>
      </i-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="outerClose">取 消</el-button>
        <el-button type="primary" @click="submit">查询</el-button>
      </span>
    </i-dialog>
  </div>
</template>
<script>
import { getDeviceParam } from '@/api/device'
export default {
  name: 'ViewDevice',
  data() {
    return {
      paramList: [],
      valueList: {},
      optionTypeObj: {
        GATEWAY: [
          {
            text: '网关版本号',
            label: 'softVersion',
          },
          {
            text: 'RSSI值',
            label: 'rssi',
          },
          {
            text: '物联卡号',
            label: 'iccid',
          },
          {
            text: '网关插座MAC地址',
            label: 'devId',
          },
        ],
        SOCKET: [
          {
            text: '插座版本号',
            label: 'softVersion',
          },
          {
            text: '当前温度',
            label: 'devTemp',
          },
        ],
        NB_DEVICE: [
          {
            text: '设备版本号',
            label: 'softVersion',
          },
          {
            text: 'RSSI值',
            label: 'rssi',
          },
          {
            text: '物联卡号',
            label: 'iccid',
          },
          {
            text: '当前温度',
            label: 'devTemp',
          },
        ],
        SWIPCARD_DEVICE: [
          {
            text: '插座版本号',
            label: 'softVersion',
          },
          {
            text: '当前温度',
            label: 'devTemp',
          },
        ],
      },
      form: {},
      formItems: [
        {
          slot: 'checkbox',
        },
      ],
    }
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    type: {
      type: String,
      required: true,
    },
    optionAttr: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    options() {
      return this.optionTypeObj[this.type]
    },
  },
  methods: {
    outerClose() {
      this.paramList = []
      this.valueList = []
      this.$emit('update:visible', false)
      this.$emit('update:optionAttr', {})
    },
    refreshTable() {
      this.$emit('refreshTable')
    },
    submit() {
      let params = {}
      this.paramList.forEach((param) => {
        params[param] = true
      })
      params.deviceId = this.optionAttr.deviceId
      const loading = this.$loading({
        lock: true,
        text: '操作进行中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.8)',
      })
      getDeviceParam(params).then(
        (res) => {
          loading.close()
          let tmpObj = {}
          this.options.forEach(
            (item) =>
              (tmpObj[item.label] = res[item.label] ? res[item.label] : '--')
          )
          this.valueList = tmpObj
        },
        () => {
          loading.close()
          this.refreshTable()
          this.outerClose()
        }
      )
    },
  },
}
</script>
<style lang="scss" scoped>
.checkbox-group {
  display: flex;
  flex-direction: column;
}
.value-text {
  margin-left: 10px;
}
</style>
